<template>
  <div class="IssueOrder">
    <!-- 顶部图片 -->
    <div class="headPic">
      <image :src="currentTab === 1 ? '../../static/images/DL.png' : '../../static/images/PL.png'"></image>
    </div>

    <!-- tabs栏 -->
    <div class="tabs">
      <div :class="currentTab === 1 ? 'tab tab-active' : 'tab'" @click="switchTab(1)">代练</div>
      <div :class="currentTab === 2 ? 'tab tab-active' : 'tab'" @click="switchTab(2)">陪练</div>
    </div>

    <!-- 图标列表 -->
    <div class="games">
      <scroll-view scroll-x class="scroll-view_H" :scroll-with-animation="true" :enable-flex="true">
        <div :class="currentGame === item.title ? 'gameItem gameItem-active' : 'gameItem'"
          v-for="(item, index) in gameListDL" :key="index" @click="selectGame(item)">
          <image :src="item.icon"></image>
          <span>{{ item.title }}</span>
        </div>
      </scroll-view>
      <!-- <uni-popup ref="moreGamePopup" type="center">
       
      </uni-popup> -->

      <!-- <div class="moreGame">
        <span style="margin-left: 10rpx;">更多游戏</span>
        <image src="../../static/icons/arrow-down.png"></image>
      </div> -->
    </div>

    <!-- 表单区域 -->
    <WZDL v-if="currentTab === 1 && currentGame == '王者荣耀'"></WZDL>
    <WZPL v-if="currentTab === 2 && currentGame == '王者荣耀'"></WZPL>
    <YXLMDL v-if="currentTab === 1 && currentGame == '英雄联盟'"></YXLMDL>
    <YXLMPL v-if="currentTab === 2 && currentGame == '英雄联盟'"></YXLMPL>
    <WWQYDL v-if="currentTab === 1 && currentGame == '无畏契约'"></WWQYDL>
    <WWQYPL v-if="currentTab === 2 && currentGame == '无畏契约'"></WWQYPL>
    <SJZDL v-if="currentTab === 1 && currentGame == '三角洲'"></SJZDL>
    <SJZPL v-if="currentTab === 2 && currentGame == '三角洲'"></SJZPL>
    <div class="more-game" v-if="currentGame == '更多游戏'">
      <image src="../../static/images/GDYX.jpg"></image>
      <div class="text">客服电话：18888888888</div>
    </div>
  </div>
</template>

<script>
import WZDL from "../../components/DL/WZDL.vue";
import WZPL from "../../components/PL/WZPL.vue";
import YXLMDL from "../../components/DL/YXLMDL.vue";
import YXLMPL from "../../components/PL/YXLMPL.vue";
import WWQYDL from "../../components/DL/WWQYDL.vue";
import WWQYPL from "../../components/PL/WWQYPL.vue";
import SJZDL from "../../components/DL/SJZDL.vue";
import SJZPL from "../../components/PL/SJZPL.vue";

export default {
  components: {
    WZDL,
    WZPL,
    YXLMDL,
    YXLMPL,
    WWQYDL,
    WWQYPL,
    SJZDL,
    SJZPL
  },
  data() {
    return {
      gameListDL: [
        {
          icon: "../../static/images/WZRY.jpg",
          title: "王者荣耀"
        },
        {
          icon: "../../static/images/YXLM.jpg",
          title: "英雄联盟"
        },
        {
          icon: "../../static/images/WWQY.jpg",
          title: "无畏契约"
        },
        {
          icon: "../../static/images/SJZ.jpg",
          title: "三角洲"
        },
        {
          icon: "../../static/images/GDYX.jpg",
          title: "更多游戏"
        }
      ],
      currentGame: '王者荣耀',
      currentTab: 1,
    };
  },
  methods: {
    selectGame(item) {
      this.currentGame = item.title;
    },
    switchTab(tab) {
      this.currentTab = tab;
    },
    showMoreGamePopup() {
      this.$refs.moreGamePopup.open();
    },
  },
  mounted() {
    // 如果 onMounted 中有逻辑，需要移到这里
  }
}
</script>

<style scoped>
.more-game {
  width: 100%;
  height: 416rpx;
  background-color: #f5f5f5;
  border-radius: 10rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30rpx;
  box-sizing: border-box;

}

.more-game image {
  width: 200rpx;
  height: 200rpx;
}

.more-game .text {
  margin-top: 30rpx;
  font-size: 18px;
  font-weight: 700;
  color: #333;
}

.IssueOrder {
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;
}

.headPic {
  width: 100%;
  height: 310rpx;
}

.headPic image {
  width: 100%;
  height: 100%;
}

.tabs {
  width: 100%;
  height: 100rpx;
  display: flex;
  align-items: center;
  background: -webkit-linear-gradient(top, skyblue, #fff);
  border-radius: 20%;
  margin-top: -20rpx;
  border-bottom-left-radius: 0%;
  border-bottom-right-radius: 0%;
}

.tabs .tab {
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 700;
  color: rgb(48, 47, 47);
  border-radius: 20%;
  border-bottom-left-radius: 0%;
  border-bottom-right-radius: 0%;
}

.tabs .tab-active {
  color: #000;
  background: #fff;
  /* 可以添加更多样式以区分激活状态 */
}

.games {
  width: 100%;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 20rpx 0;
}

.gameList {
  width: 100%;
  overflow: hidden;
}

.scroll-view_H {
  white-space: nowrap;
  /* 防止内容换行 */
  width: 100%;
  height: 182rpx;
  display: flex;
}

/* 游戏项样式 */
.gameItem {
  width: 28%;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-size: 13px;
  padding: 20rpx;
  box-sizing: border-box;
  margin-left: 20rpx;
}

.gameItem-active {
  border: 1px solid #198dda;
  background-color: #eeeeee;
  border-radius: 7px;
}

.gameItem image {
  width: 90rpx;
  height: 90rpx;
  border-radius: 7px;
  margin-bottom: 10rpx;
}

/* 
.games .gameList {
  width: 89%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin-right: 20rpx;
}

.games .gameList .gameItem {
  width: 22%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 13px;
  padding: 10rpx;
  margin-left: 10rpx;
  box-sizing: border-box;
}

.games .gameList .gameItem-active {
  border: 1px solid #198dda;
  background-color: #eeeeee;
  border-radius: 7px;
}


.games .gameList .gameItem image {
  width: 60rpx;
  height: 60rpx;
  border-radius: 7px;
  margin-bottom: 10rpx;
} */


.games .moreGame {
  width: auto;
  /* 自动宽度以适应内容 */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 垂直居中对齐 */
  justify-content: flex-start;
  /* 左对齐 */
  position: relative;
  border-left: 5px solid #eee;
  padding: 0 20rpx;
}

.games .moreGame label {
  margin-right: 8rpx;
  /* 文字和图标之间的间距 */
  writing-mode: vertical-rl;
  /* 文字垂直排列，从右到左 */
  writing-mode: tb-rl;
  /* 兼容旧浏览器 */
  font-size: 13px;
  letter-spacing: 5rpx;

}

.games .moreGame image {
  width: 25rpx;
  height: 25rpx;
}
</style>